<template>
  <div class="task-container">
    <!-- 查询表单 -->
    <el-card class="search-box">
      <el-form :inline="true" :model="queryForm" class="custom-form">
        <!-- 模糊查询 -->
        <el-form-item label="模糊查询">
          <el-input
            v-model="queryForm.keyword"
            :suffix-icon="Search"
            clearable
            style="width: 140px"
          />
        </el-form-item>

        <!-- 任务状态 -->
        <el-form-item label="任务状态">
          <el-select v-model="queryForm.status" placeholder="全部" style="width: 115px">
            <el-option label="全部" value="" />
            <el-option label="未完成" value="0" />
            <el-option label="待领取" value="1" />
          </el-select>
        </el-form-item>

        <!-- 发布时间 -->
        <el-form-item label="发布时间">
          <el-date-picker
            v-model="queryForm.dateRange"
            type="daterange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            style="width: 277px"
          />
        </el-form-item>

        <!-- 右侧按钮 -->
        <div class="flex-spacer"></div>

        <el-form-item class="form-actions">
          <el-button type="primary" style="width: 84px; height: 32px; background-color: #3c80ff">
            <el-icon><Search /></el-icon>
            查询
          </el-button>
          <el-button style="width: 84px; height: 32px">
            <el-icon><RefreshRight /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 任务列表 -->
    <el-card class="task-list">
      <div class="header-actions">
        <span class="notice">全部通知 ( {{ 1 }} )</span>
        <el-button class="btn">全部已读</el-button>
      </div>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="index" label="序号" />
        <el-table-column prop="duration" label="任务时长" />
        <el-table-column prop="cycle" label="开播周期" />
        <el-table-column prop="liveTime" label="直播时间" />
        <el-table-column prop="requirement" label="任务要求" width="220">
          <template #default="{ row }">
            <div class="requirement-container">
              <span>带货价值(元)</span>
              <el-select v-model="row.product" placeholder="请选择">
                <el-option
                  v-for="item in products"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="progress" label="任务目标/进度">
          <template #default="{ row }">
            <div>{{ row.current }}/{{ row.target }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="publishTime" label="任务发布时间" />
        <el-table-column prop="isTemp" label="是否临时任务" />
        <el-table-column prop="remark" label="任务备注" />
        <el-table-column prop="status" label="任务状态">
          <template #default="{ row }">
            <span>
              {{ row.status === 0 ? "未完成" : "已完成" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="gift" label="礼物领取">
          <template #default="{ row }">
            <span :class="{ unclaimed: row.gift === '未领取' }">{{ row.gift }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="operate" label="操作">
          <template #default>
            <el-button type="text">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="total > 0"
        :current-page="queryParams.current"
        :page-size="queryParams.size"
        :total="total"
        small
        background
        layout="prev, pager, next"
        class="mt-4"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>
<script lang="ts">
export default {
  name: "LiveEarning",
};
</script>
<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";

const total = ref();
const queryForm = reactive({
  keyword: "",
  status: "",
  dateRange: [],
});

const tableData = ref([
  {
    index: 1,
    duration: "5个月",
    cycle: "每周五次",
    liveTime: "24h",
    product: "vivo手机",
    current: 10000,
    target: 10000,
    publishTime: "2025-05-20 16:30",
    isTemp: "是",
    remark: "重要",
    gift: "未领取",
    status: 0,
  },
]);

//分页器
const queryParams = reactive<QueryParams>({
  current: 1, //保证金记录分页查询
  size: 10,
  userBizId: "",
});
// 分页处理
const handleCurrentChange = (newPage: number) => {
  queryParams.current = newPage;
};
</script>

<style lang="scss" scoped>
.task-container {
  padding: 5px;
  background: #ffffff;
  .search-box {
    padding: 20px;
    border-radius: 30px 30px 0px 0px;
    background: #f0f5ff;
    box-shadow:
      inset 2px 1px 2px 1px #ffffff,
      0px 4px 8px 0px #eaf0ff;
    border: none;
    min-height: 100px;

    :deep(.custom-form) {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 30px;

      .el-form-item {
        margin: 0;
        display: flex;
        align-items: center;

        :deep(.el-form-item__label) {
          color: #606266;
          font-size: 14px;
          padding-right: 8px;
        }
      }

      .flex-spacer {
        flex: 1;
        min-width: 10px;
      }

      .form-actions {
        margin: auto;
        gap: 30px;

        .el-button {
          width: 90px;
          height: 36px;
          font-size: 14px;

          &--primary {
            background: #409eff;
            border-color: #409eff;
          }
        }
      }
    }
  }
  .task-list {
    padding: 20px;
    border-radius: 0px 0px 30px 30px;
    min-height: 1020px;
    background: linear-gradient(180deg, #f0f5ff 0%, #fbfcfe 100%);
    box-shadow:
      inset 2px 1px 2px 1px #ffffff,
      0px 4px 8px 0px #eaf0ff;
    border: none;
    .requirement-container {
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }
    .unclaimed {
      color: #e6a23c !important;
    }
    .header-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      .notice {
        font-weight: bold;
        font-size: 16px;
        color: #333333;
      }
      .btn {
        color: #3c80ff;
        border-color: #3c80ff;
        background: transparent !important;
        font-size: 14px;
        font-weight: 400;
      }
      h3 {
        margin: 0;
        font-size: 16px;
      }
    }

    .product-name {
      color: #666;
      font-size: 12px;
    }

    .el-tag {
      width: 70px;
      text-align: center;
    }
  }
}
</style>
